<template>
	<view class="page-wrap">
		<match-media :min-width="MAX_SIZEiZE">
			<navBar></navBar>
		</match-media>
		<match-media :max-width="MAX_SIZEiZE - 1">
			<cu-custom :title="$t('Page.mineWallet.txjg')" :goBack="goBack"> </cu-custom>
		</match-media>
		<view class="content">
			<pc-nav-bar :pageName="$t('Page.mineWallet.txjg')"> </pc-nav-bar>
			<view class="result-cont">
				<image v-if="payInfo.status == 0" class="atatus-icon"
					:src="`/static/image/Mine/Mywallet/waiting-${theme}.png`">
				</image>
				<image v-else-if="payInfo.status == 2" class="atatus-icon"
					:src="`/static/image/Mine/Mywallet/success-${theme}.png`">
				</image>
				<image v-else-if="payInfo.status == 3" class="atatus-icon"
					:src="`/static/image/Mine/Mywallet/fail-${theme}.png`"></image>
				<view class="status-text">
					{{statusText[payInfo.status]}}
				</view>
				<view class="card">
					<view class="header">
						<view class="con-title"> {{$t('Page.mineWallet.txxx')}} </view>
					</view>
					<view class="card-cont">
						<view class="row">
							{{$t('Page.mineWallet.phone')}}：{{bankInfo.phone}}
						</view>
						<view class="row">
							{{$t('Page.mineWallet.cpf')}}：{{bankInfo.cpf}}
						</view>
						<view class="row">
							{{$t('Page.mineWallet.bank')}}：{{bankInfo.name}}
						</view>
						<view class="row">
							{{$t('Page.mineWallet.email')}}：{{bankInfo.email}}
						</view>
						<view class="row">
							{{$t('Page.mineWallet.pix')}}：{{bankInfo.pix}}
						</view>
					</view>
					<view class="row">
						<view class="row-l">
							{{$t('Page.mineWallet.ddh')}}
						</view>
						<view class="row-r">
							{{payInfo.sn}}
						</view>
					</view>
					<view class="row">
						<view class="row-l">
							{{$t('Page.mineWallet.txje')}}
						</view>
						<view class="row-r" style="color: var(--color-1)">
							R$ {{payInfo.price}}
						</view>
					</view>
					<view class="row">
						<view class="row-l">
							{{$t('Page.mineWallet.jsje')}}
						</view>
						<view class="row-r" style="color: var(--color-1)">
							R$ {{payInfo.trueprice}}
						</view>
					</view>
					<view class="row">
						<view class="row-l">
							{{$t('Page.mineWallet.sqsj')}}
						</view>
						<view class="row-r" style="color: var(--color-36);">
							{{$tools.timeFormat(payInfo.createtime, 'dd/mm/yyyy hh:MM:ss')}}
						</view>
					</view>
					<view class="row" v-if="Number(payInfo.status) !== 0">
						<view class="row-l">
							{{$t('Page.mineWallet.wcsj')}}
						</view>
						<view class="row-r" style="color: var(--color-36);">
							{{$tools.timeFormat(payInfo.updatetime, 'dd/mm/yyyy hh:MM:ss')}}
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import pcNavBar from '@/components/pcNavBar/pcNavBar.vue'
	import cuCustom from '@/components/cu-custom/cuCustom.vue'
	import {
		mapState
	} from 'vuex'
	import {
		MAX_SIZEiZE
	} from '@/common/app.js'
	import {
		sendMessage
	} from '@/api/websocket.js'
	export default {
		components: {
			pcNavBar,
			cuCustom
		},
		data() {
			return {
				MAX_SIZEiZE,
				payInfo: {},
				statusText: {
					0: this.$t('Page.mineWallet.txshz'),
					2: this.$t('Page.mineWallet.txcg'),
					3: this.$t('Page.mineWallet.txsb'),
				},
				isRecord: false,
				id: ''
			}
		},
		computed: {
			...mapState({
				theme: state => state.app.theme
			}),
			bankInfo() {
				return this.payInfo.bank_info || {}
			},
		},
		onLoad(option) {
			if (option.item) {
				console.log("option: ", JSON.parse(option.item).id);
				this.isRecord = false
				this.id = JSON.parse(option.item).id;
				this.getDetail();
			}

			if (option?.id) {
				this.id = option.id
				this.isRecord = true
				this.getDetail()
			}

			uni.$on('CHECKWITHDRAWAL', (e) => {
				console.log('提现充值状态变了', e);
				if (e.order_sn === this.payInfo.sn) {
					this.payInfo.status = e.status;
				}
			})
		},
		methods: {
			goBack() {
				let canNavBack = getCurrentPages();
				if (canNavBack && canNavBack.length > 1) {
					uni.navigateBack({
						delta: 1
					})
				} else {
					uni.reLaunch({
						url: `/pages/Mine/wallet/wallet?index=1`
					})
				}
			},

			getDetail() {
				const {
					WITHDRAWDETAIL
				} = this.$api
				sendMessage({
					flag: WITHDRAWDETAIL,
					content: {
						id: this.id
					}
				})
				uni.$once(WITHDRAWDETAIL, (res) => {
					const {
						code,
						data
					} = res
					if (code === 1) {
						this.payInfo = data;
						this.id = data.id;
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.page-wrap {
		min-height: 100vh;
		background: var(--bg-3);

		.content {
			width: 100%;
			height: calc(100vh - 44px - var(--status-bar-height));
			overflow-y: scroll;
			padding: 20px 15px 0;
			box-sizing: border-box;

			.result-cont {
				width: 100%;
				display: flex;
				flex-direction: column;
				align-items: center;

				.atatus-icon {
					width: 140px;
					height: 140px;
				}

				.status-text {
					font-size: 16px;
					font-family: PingFang SC-Bold, PingFang SC;
					font-weight: bold;
					color: #FFFFFF;
					margin: 12px auto 30px;
				}

				.card {
					width: 100%;
					display: flex;
					flex-direction: column;
					background: var(--bg-9);
					border-radius: 15px;
					padding: 15px 15px 20px;
					margin-bottom: 10px;
					box-sizing: border-box;

					.con-title {
						font-size: 13px;
						font-weight: bold;
						color: #FFFFFF;
					}

					.card-cont {
						background: var(--bg-45);
						border-radius: 5px;
						padding: 15px;
						margin: 10px 0;
						color: #fff;
						font-size: 13px;
						font-weight: 500;
						line-height: 1.6;
						box-sizing: border-box;
					}

					.row {
						width: 100%;
						display: flex;
						align-items: center;
						justify-content: space-between;
						height: 40px;
						font-family: PingFang SC-Bold, PingFang SC;
						font-weight: bold;

						.row-l {
							font-size: 14px;
							color: var(--color-34);
						}

						.row-r {
							font-size: 15px;
							color: #FFFFFF;
						}
					}
				}
			}
		}
	}

	@media screen and (min-width: 768px) {
		.page-wrap {
			padding-top: 70px;

			.content {
				width: 100%;
				height: calc(100vh - 70px) !important;
				overflow-y: auto;
				padding: 10px 30px 0;
				box-sizing: border-box;

				.result-cont {
					margin-top: 30px;
				}

			}
		}
	}
</style>